<template>
  <n-config-provider :theme="theme" :locale="nLocale.locale"
                                    :date-locale="nLocale.date"
                                    :theme-overrides="themeOverrides">
    <n-global-style />
    <n-loading-bar-provider>
      <n-message-provider>
        <n-dialog-provider>
          <slot />
        </n-dialog-provider>
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, provide, computed } from 'vue'
import { useOsTheme, darkTheme,
         zhCN, dateZhCN,
         enUS, dateEnUS,
         jaJP, dateJaJP,
         koKR, dateKoKR,
         zhTW, dateZhTW
       } from 'naive-ui'
import { useI18n } from 'vue-i18n'

const osTheme = useOsTheme()
const theme = ref(osTheme.value === 'dark' ? darkTheme : null)

const toggleTheme = (): void => {
  theme.value = (theme.value ? null : darkTheme)
}
provide('toggleTheme', toggleTheme) // expose to child components

const nLocaleKeys = {
  zh_CN: { locale: zhCN, date: dateZhCN },
  zh_TW: { locale: zhTW, date: dateZhTW },
  ja_JP: { locale: jaJP, date: dateJaJP },
  ko_KR: { locale: koKR, date: dateKoKR },
  en_US: { locale: enUS, date: dateEnUS },
}
// fetch global locale var in vue-i18n
const { locale } = useI18n()
// convert to naive-ui locale key
const nLocale = computed(() => nLocaleKeys[locale.value])

const themeOverrides = {
  Radio: {
    buttonColorActive: '#18a058',
    buttonTextColorActive: '#FFFFFF'
  },
  Alert: {
    padding: '25px',
    iconMargin: '21px 4px 0 16px'
  }
}

</script>
